import { EntNoStudySearchParams, getEntNoStudyList, noStudyListItem } from '@/api/StatisticsApi/entStudyTable';
import { useAppSelector } from '@/redux/store';
import { Button, Space } from 'antd';
import React, { useMemo, useRef, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import type { YmTablePorps } from 'ym-design';
import { YmAddPageLayout, YmTable, type YmAddPageLayoutProps } from 'ym-design';
import { PersonStudyDetailModal, PersonStudyTableProps } from '../PersonStudyDetail';
type SearchValue = Partial<EntNoStudySearchParams>;
type TableRecord = noStudyListItem;
const { PaneItem } = YmAddPageLayout;
function EntPersonStudyTable() {
  //人员明细
  const personStudyRef = useRef<any>();
  const [planItem, setPlanItem] = useState<PersonStudyTableProps>({
    title: '详情',
    isHiddenSearch: true,
    finishState: undefined,
    planCourseId: undefined,
    cycleId: undefined,
    entId: '',
  });

  const { entId } = useAppSelector((state) => state.loginEnt);
  const [searchParam] = useSearchParams();
  const navigator = useNavigate();
  const title = searchParam.get('title');
  const cycleId =
    searchParam.get('cycleId') && searchParam.get('cycleId') != 'null' ? searchParam.get('cycleId') : undefined;
  const planCourseId =
    searchParam.get('planCourseId') && searchParam.get('planCourseId') != 'null' ? searchParam.get('planCourseId') : '';
  console.log('cycleId', cycleId);

  const columns: YmTablePorps<TableRecord, SearchValue>['columns'] = useMemo(
    () => [
      {
        title: '编号',
        dataIndex: 'No',
        key: 'No',
        width: 80,
        render(value) {
          return value < 10 ? '0' + value : value;
        },
      },
      {
        dataIndex: 'entName',
        title: '企业名称',
        key: 'entName',
        ellipsis: true,
        width: 300,
      },
      {
        dataIndex: 'noStudyPersonNum',
        title: '未学人数(人)',
        key: 'noStudyPersonNum',
        width: 120,
      },
      {
        title: '操作',
        key: 'action',
        width: 100,
        fixed: 'right',
        render: (text, record) => {
          return (
            <Space direction="horizontal" size={0}>
              <Button
                type="text"
                size="small"
                onClick={(e: React.MouseEvent) => {
                  e.stopPropagation();
                  setPlanItem({
                    title: '详情',
                    isHiddenSearch: true,
                    finishState: 2,
                    planCourseId: record.planCourseId,
                    cycleId: record.cycleId,
                    entId: record.entId,
                  });
                  personStudyRef.current?.showModal();
                }}
              >
                <span className="safe-edu_table_operation_text">详情</span>
              </Button>
            </Space>
          );
        },
      },
    ],
    [searchParam],
  );
  const layoutParams: YmAddPageLayoutProps = useMemo(
    () => ({
      leftOperation: {
        onBack: () => {
          navigator(-1);
        },
      },
      destroyInactiveTabPane: false,
    }),
    [],
  );
  return (
    <YmAddPageLayout {...layoutParams}>
      <PaneItem tabKey="tab1" label={title || '详情'} className="pane_tab1">
        <div>
          <div style={{ background: '#fff', width: '100%' }}>
            <YmTable<TableRecord, SearchValue>
              rowKey="entId"
              columns={columns}
              toolBar={false}
              request={async ({ page }, value = {}) => {
                const result = await getEntNoStudyList({
                  planCourseId: planCourseId || '',
                  cycleId: cycleId || undefined,
                });
                return { list: result, total: 1 };
              }}
            />
          </div>
          <PersonStudyDetailModal
            props={planItem}
            innerRef={personStudyRef}
            onChange={() => {}}
          ></PersonStudyDetailModal>
        </div>
      </PaneItem>
    </YmAddPageLayout>
  );
}

export default EntPersonStudyTable;
